<!-- 我的 -->
<template>
  <div class="box-my">
    <!-- 用户信息侧边栏 -->
    <UserInfoSidebar 
      :visible="showSidebar" 
      :phone="phone" 
      @close="showSidebar = false" 
      @logout="handleLogout"
      @gender-change="handleGenderChange"
    />
    <!-- 头部 -->
    <div class="title">
      <div class="tit_1" @click="goToLogin">
        <div class="tit_11">
            <img :src="avatarSrc" alt="" class="imga1">
          </div>
        <div class="tit_22" v-if="isLoggedIn">
          <div class="abc">
            <span>{{ maskedPhone }}</span>
          </div>
          <div class="abc2">
            <div class="abd1">
              <span><img src="../assets/xinxiao.png" alt="">普通会员</span>
            </div>
            <div class="abd2">
              <span>未实名&gt;</span>
            </div>
          </div>
        </div>
        <div class="tit_22" v-else>
          <div class="abc">
            <span>顺丰用户</span>
          </div>
        </div>
      </div>
      <div class="tit_2">
        <div class="label">会员中心</div>
        <div class="sub-label">领本月惊喜礼包</div>
        <div class="arrow">&gt;</div>
      </div>
    </div>
    <!-- 第二排 0000000-->
    <div class="two">
      <div class="stat-item">
        <div class="number">0</div>
        <div class="labela">积分</div>
      </div>
      <div class="stat-item">
        <div class="number">0</div>
        <div class="labela">优惠券</div>
      </div>
      <div class="stat-item">
        <div class="number">0</div>
        <div class="labela">卡余额</div>
      </div>
      <div class="stat-item">
        <div class="number">0</div>
        <div class="labela">我的奖品</div>
      </div>
      <div class="stat-item">
        <div class="number">0</div>
        <div class="labela">碳能量</div>
      </div>
    </div>
    <!-- 第三排 至尊会员-->
    <div class="membership-banner">
      <img src="../assets/wang.png" alt="皇冠" class="crown-icon">
      <div class="membership-info">
        <div class="membership-title">至尊会员</div>
        <div class="membership-benefits">全年尊享6大权益</div>
      </div>
      <button class="upgrade-button">去升级</button>
    </div>
    <!-- 第四排 我的快递开头的 -->
    <div class="list">
      <div 
        class="list-item" 
        v-for="(item, index) in icons" 
        :key="index"
        @click="handleIconClick(item.label)"
      >
        <img :src="item.src" alt="" class="list-item-icon">
        <span class="list-item-label">{{item.label}}</span>
      </div>
    </div>
    <!-- 第五排 支付发票-->
    <div class="list-five">
      <div class="section-title">支付发票</div>
      <div class="list-item" v-for="(item, index) in paymentIcons" :key="index">
        <img :src="item.src" alt="" class="list-item-icon">
        <span class="list-item-label">{{item.label}}</span>
      </div>
    </div>
    <!-- 第六排 积分活动 -->
    <div class="list-six">
      <div class="section-title">积分活动</div>
      <div class="list-item" v-for="(item, index) in activityIcons" :key="index">
        <img :src="item.src" alt="" class="list-item-icon">
        <span class="list-item-label">{{item.label}}</span>
      </div>
      <div class="activity-cards">
        <div class="activity-card" v-for="(card, index) in activityCards" :key="index">
          <div class="card-content">
            <div class="card-text">
              <div class="card-title">{{card.title}}</div>
              <div class="card-subtitle">{{card.subtitle}} <span class="card-arrow"></span></div>
            </div>
            <div class="card-image">
              <img :src="card.image" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 第七排  安全认证-->
    <div class="list-seven">
      <div class="section-title">安全认证</div>
      <div class="list-item" v-for="(item, index) in securityIcons" :key="index">
        <img :src="item.src" alt="" class="list-item-icon">
        <span class="list-item-label">{{item.label}}</span>
      </div>
    </div>
    <!-- 第八排 优惠福利-->
    <div class="list-eight">
      <div class="section-title">优惠福利</div>
      <div class="list-item" v-for="(item, index) in benefitIcons" :key="index">
        <img :src="item.src" alt="" class="list-item-icon">
        <span class="list-item-label">{{item.label}}</span>
      </div>
    </div>
    <!-- 第九排 其他服务-->
    <div class="list-nine">
      <div class="section-title">其他服务</div>
      <div class="list-item" v-for="(item, index) in serviceIcons" :key="index">
        <img :src="item.src" alt="" class="list-item-icon">
        <span class="list-item-label">{{item.label}}</span>
      </div>
    </div>
    <!-- 第十排 兑换专区-->
    <div class="exchange-header">
      <div class="exchange-title">兑换专区</div>
      <div class="exchange-more">更多&gt;</div>
    </div>
    <!-- 底层 -->
    <div class="exchange-items">
      <div class="exchange-item" v-for="(item, index) in exchangeItems" :key="index">
        <div class="item-image">
          <img :src="item.image" alt="">
        </div>
        <div class="item-title">{{item.title}}</div>
        <div class="item-bottom">
          <div class="item-points">
            <span class="points-number">{{item.points}}</span>
            <span class="points-text">积分</span>
          </div>
          <div class="exchange-button">立即兑换</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UserInfoSidebar from '../components/UserInfoSidebar.vue'

export default {
  components: {
    UserInfoSidebar
  },
  methods: {
    handleGenderChange(gender) {
      this.gender = gender;
    },
    goToLogin() {
      if (!this.isLoggedIn) {
        this.$router.push('/login-page');
      } else {
        // 如果已登录，显示侧边栏
        this.showSidebar = true;
      }
    },
    handleLogout() {
      // 清除登录状态
      this.isLoggedIn = false;
      this.phone = '';
      this.gender = ''; // 重置性别，确保头像恢复为默认的tou.png
      localStorage.removeItem('userInfo');
      // 关闭侧边栏
      this.showSidebar = false;
    },
    handleIconClick(label) {
      if (label === '我的快递') {
        this.$router.push('/home-page');
      }
    }
  },
  data() {
    return {
      isLoggedIn: false, // 默认未登录
      phone: '', // 存储登录用户的手机号
      showSidebar: false, // 控制侧边栏显示
      gender: '', // 用户性别
      exchangeItems: [
        { image: require('@/assets/7-1.png'), title: '顺丰定制公仔挂件', points: '6666' },
        { image: require('@/assets/7-2.png'), title: '顺丰定制雨伞（新款）', points: '6666' },
        { image: require('@/assets/7-3.png'), title: '顺丰定制渐变色水杯', points: '6666' },
        { image: require('@/assets/7-4.png'), title: '顺丰定制环保袋（黑色）', points: '6666' },
        { image: require('@/assets/7-5.png'), title: '顺丰定制被挎包', points: '8888' },
        { image: require('@/assets/7-6.png'), title: '顺丰定制编织篮', points: '6666' },
        { image: require('@/assets/7-7.png'), title: '顺丰定制蒲扇', points: '6888' },
        { image: require('@/assets/7-8.png'), title: '顺丰定制飞机模型（23.5cm）', points: '99999' },
        { image: require('@/assets/7-9.png'), title: '顺丰粽子礼盒（粽力前行）', points: '6888' },
        { image: require('@/assets/7-10.png'), title: '顺丰粽子礼盒（乐在途粽）', points: '8888' },
        { image: require('@/assets/7-11.png'), title: '顺丰文创公仔（小哥版）', points: '9999' },
        { image: require('@/assets/7-12.png'), title: '顺丰定制鄂州精品邮票', points: '66666' },
        { image: require('@/assets/7-13.png'), title: '顺丰定制手机支架', points: '3999' },
        { image: require('@/assets/7-14.png'), title: '顺丰便携收纳旅行袋', points: '6666' }
      ],
      serviceIcons: [
        { src: require('@/assets/6-1.png'), label: '签署记录' },
        { src: require('@/assets/6-2.png'), label: '理赔中心' },
        { src: require('@/assets/6-3.png'), label: '体验社区' },
        { src: require('@/assets/6-4.png'), label: '顺丰云店' },
        { src: require('@/assets/6-5.png'), label: '会话消息' },
        { src: require('@/assets/6-6.png'), label: '反馈建议' },
        { src: require('@/assets/6-7.png'), label: '关于顺丰' },
        { src: require('@/assets/6-8.png'), label: '设置' }
      ],
      benefitIcons: [
        { src: require('@/assets/5-1.png'), label: '学生福利' },
        { src: require('@/assets/5-2.png'), label: '亲情卡' },
        { src: require('@/assets/5-3.png'), label: '特快卡' },
        { src: require('@/assets/5-4.png'), label: '顺丰礼品卡' },
        { src: require('@/assets/5-5.png'), label: '企业合作' },
        { src: require('@/assets/5-6.png'), label: '企业福利' },
        { src: require('@/assets/5-7.png'), label: 'SVIP' },
        { src: require('@/assets/5-8.png'), label: '家庭账户' }
      ],
      securityIcons: [
        { src: require('@/assets/4-1.png'), label: '实名认证' },
        { src: require('@/assets/4-2.png'), label: '号码保护' },
        { src: require('@/assets/4-3.png'), label: '多账号' },
        { src: require('@/assets/4-4.png'), label: '顺丰ID' }
      ],
      activityCards: [
        { 
          title: "超寄星期三", 
          subtitle: "限时领劵>", 
          image: require('@/assets/3-6.png')
        },
        { 
          title: "26会员日", 
          subtitle: "会员开红包>", 
          image: require('@/assets/3-7.png')
        },
        { 
          title: "收件兑奖", 
          subtitle: "收件领取丰蜜>", 
          image: require('@/assets/3-8.png')
        }
      ],
      activityIcons: [
        { src: require('@/assets/3-1.png'), label: '积分商城' },
        { src: require('@/assets/3-2.png'), label: '积分抽奖' },
        { src: require('@/assets/3-3.png'), label: '积分夺宝' },
        { src: require('@/assets/3-4.png'), label: '积分开红包' },
        { src: require('@/assets/3-5.png'), label: '积分秒杀' }
      ],
      paymentIcons: [
        { src: require('@/assets/2-1.png'), label: '待支付' },
        { src: require('@/assets/2-2.png'), label: '发票申请' },
        { src: require('@/assets/2-3.png'), label: '我的返款' },
        { src: require('@/assets/2-4.png'), label: '税金凭证' },
        { src: require('@/assets/2-5.png'), label: '我的钱包' }
      ],
      icons: [
        { src: require('@/assets/1-1.png'), alt: '我的快递', label: '我的快递' },
        { src: require('@/assets/1-2.png'), alt: '地址簿', label: '地址簿' },
        { src: require('@/assets/1-3.png'), alt: '偏好设置', label: '偏好设置' },
        { src: require('@/assets/1-4.png'), alt: '专属快递员', label: '专属快递员' },
        { src: require('@/assets/1-5.png'), alt: '签收码', label: '签收码' },
        { src: require('@/assets/1-6.png'), alt: '客服中心', label: '客服中心' },
        { src: require('@/assets/1-7.png'), alt: '服务查询', label: '服务查询' },
        { src: require('@/assets/1-8.png'), alt: '我的月报', label: '我的月报' },
        { src: require('@/assets/1-9.png'), alt: '通关服务', label: '通关服务' },
        { src: require('@/assets/1-10.png'), alt: '行业模板库', label: '行业模块库'},    
        { src: require('@/assets/1-11.png'), alt: '查历史快递', label: '查历史快递' }
      ]
    }
  },
  computed: {
    maskedPhone() {
      if (!this.phone) return '';
      return this.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
    },
    avatarSrc() {
      switch(this.gender) {
        case '男':
          return require('../assets/tou-nan.png');
        case '女':
          return require('../assets/tou-nv.png');
        default:
          return require('../assets/tou.png');
      }
    }
  },
  created() {
    // 从localStorage获取登录状态和手机号
    const userInfo = localStorage.getItem('userInfo');
    if (userInfo) {
      const { phone } = JSON.parse(userInfo);
      if (phone) {
        this.isLoggedIn = true;
        this.phone = phone;
      }
    }
  }
}

</script>
<style>
* {
  padding: 0;
  margin: 0;
}

.box-my {
  width: 100%;
  height: 100%;
  background: linear-gradient(#faefe5, #f2f3f8);
}

/* 第一排 */
.title {
  padding-top: 50px;
  width: 95%;
  height: 75px;
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
}

.title .tit_1 {
  height: 75px;
  display: flex;
}

/* 头像 */
.title .tit_1 .tit_11 {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: space-between;
}

.title .tit_1 .tit_11 .imga1 {
  width: 60px;
  height: 60px;
}

/* 电话 */
.title .tit_22 {
  padding-top: 10px;
  padding-left: 5px;
}

.title .tit_22 .abc {
  font-size: 18px;
  color: #333333;
  text-align: left;
}

/* 电话下字 */
.title .tit_22 .abc2 {
  font-size: 13px;
  margin-top: 5px;
  display: flex;
}

/* 普通会员 */
.title .tit_22 .abc2 .abd1 {
  width: 80px;
  height: 25px;
  line-height: 25px;
  background-color: #f2eeea;
  color: #876e5a;
  border-radius: 2px;
}

.title .tit_22 .abc2 .abd1 img {
  margin-right: 2px;
  width: 15px;
  height: 15px;
}

/* 未实名 */
.title .tit_22 .abc2 .abd2 {
  width: 60px;
  height: 25px;
  background-color: #fde7e4;
  line-height: 25px;
  border-radius: 2px;
  color: red;
}

/* 会员中心 */
.title .tit_2 {
  margin-top: 15px;
  width: 80px;
  height: 40px;
  background-color: #edd7c1;
  border-radius: 3px;
  text-align: center;
  justify-content: center;
  position: relative;
  color: #876e5a;
}

/* 标签 */
.title .tit_2 .label {
  padding-top: 5px;
  font-size: 11px;
  font-weight: 500;
}

/* 标签 */
.title .tit_2 .sub-label {
  font-size: 9px;
}

/* 箭头 */
.title .tit_2 .arrow {
  font-size: 10px;
  position: absolute;
  top: 15px;
  right: 0;
}

/* 第二排 */
.two {
  margin-top: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px;
  border-radius: 5px;
  /* 圆角 */
  font-family: Arial, sans-serif;
}

/* 会员信息 */
.stat-item {
  text-align: center;
}

/* 数字 */
.number {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

/* 标签 */
.labela {
  font-size: 14px;
  color: #666;
  /* 标签颜色 */
}

/* 第三排 */
.membership-banner {
  width: 95%;
  height: 50px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  background: linear-gradient(to left, #ffbc57, #f9da97);
  /* 背景颜色 */
  /* padding: 10px 20px; */
  border-radius: 5px;
  /* 圆角 */
  font-family: Arial, sans-serif;
}

/* 会员图标 */
.crown-icon {
  padding-left: 10px;
  width: 35px;
  /* 图标大小 */
  height: 24px;
  margin-right: 10px;
}

.membership-info {
  flex-grow: 1;
  /* 占据剩余空间 */
  display: flex;
}

/* 会员名称 */
.membership-title {
  font-size: 18px;
  font-weight: bold;
  background-image: linear-gradient(to right, #db8104, #9b6802);
  /* 字体渐变 */
  -webkit-text-fill-color: transparent;
  /* 使文本颜色透明 */
  background-clip: text;
  /* 使背景应用于文本 */
}

/* 会员权益 */
.membership-benefits {
  padding-top: 3px;
  padding-left: 5px;
  font-size: 14px;
  color: #8b4513;
  /* 棕色 */
}

/* 升级按钮 */
.upgrade-button {
  margin-right: 10px;
  width: 65px;
  height: 30px;
  background-color: #8b4513;
  /* 按钮背景颜色 */
  color: rgb(246, 221, 179);
  /* 按钮文字颜色 */
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
}

.upgrade-button:hover {
  background-color: #a32c04;
  /* 悬停时的背景颜色 */
}

/* 第四排  我的快递开头*/
.list {
  width: 95%; /* 宽度占父容器的92% */
  border-radius: 5px; /* 圆角边框半径为5px */
  background-color: rgb(255, 255, 255); /* 背景颜色设置为白色 */
  margin: 10px auto; /* 上下外边距为10px，左右居中 */
  display: grid; /* 使用网格布局 */
  grid-template-columns: repeat(5, minmax(60px, 1fr)); /* 创建5列，每列最小宽度60px，最大为可用空间等分 */
  grid-template-rows: repeat(2, auto); /* 创建2行，高度根据内容自动调整 */
  grid-auto-flow: column; /* 网格项按照列方向排列 */
  grid-auto-columns: minmax(60px, 1fr); /* 自动创建的额外列遵循同样的minmax规则 */
  gap: 5px 10px; /* 行间距15px，列间距10px */
  overflow-x: auto; /* 横向溢出时可滚动 */
  padding: 5px 5px; /* 内边距上下5px，左右5px */
  scroll-snap-type: x proximity; /* 启用基于x轴的近邻滚动捕捉 */
  -webkit-overflow-scrolling: touch; /* 在移动设备上启用平滑滚动 */
  scroll-behavior: smooth; /* 平滑滚动 */
}

/* 隐藏滚动条但保持功能 */
.list::-webkit-scrollbar { /* 针对WebKit内核浏览器隐藏滚动条 */
  display: none;
}

.list {
  -ms-overflow-style: none;  /* IE和Edge浏览器隐藏滚动条 */
  scrollbar-width: none;  /* Firefox浏览器隐藏滚动条 */
}

.list-item {
  display: flex; /* 使用弹性盒子布局 */
  flex-direction: column; /* 子元素按列排列 */
  align-items: center; /* 子元素水平居中 */
  justify-content: center; /* 子元素垂直居中 */
  text-align: center; /* 文本居中 */
  padding: 5px; /* 内边距5px */
  scroll-snap-align: start; /* 滚动捕捉点位于元素开始位置 */
  min-width: 60px; /* 最小宽度60px */
}

/* 确保第11个及之后的元素需要通过滚动才能看到 */
.list-item:nth-child(n+11) {
  grid-column: auto; /* 列位置自动 */
  grid-row: auto; /* 行位置自动 */
}

.list-item-icon {
  width: 30px; /* 宽度30px */
  height: 30px; /* 高度30px */
  margin-bottom: 8px; /* 下边距8px */
  object-fit: contain; /* 保证图标在指定宽高内完整显示 */
}

.list-item-label {
  font-size: 12px; /* 字体大小12px */
  color: #333; /* 文字颜色#333 */
  white-space: nowrap; /* 强制文本不换行 */
  width: 100%; /* 占据整个宽度 */
  overflow: hidden; /* 溢出部分隐藏 */
  /* text-overflow: ellipsis; 溢出文本以省略号显示 */
}
/* 第五排 支付发票*/
.list-five {
  width: 95%; /* 容器宽度为父元素的92% */
  border-radius: 5px; /* 设置圆角边框，半径为5px */
  background-color: rgb(255, 255, 255); /* 背景颜色设置为白色 */
  margin: 10px auto; /* 上下外边距为10px，左右居中显示 */
  display: grid; /* 启用CSS网格布局 */
  grid-template-columns: repeat(5, minmax(60px, 1fr)); /* 创建5列，每列最小宽度60px，最大为可用空间等分 */
  grid-template-rows: auto auto; /* 创建2行，高度根据内容自动调整 */
  gap: 5px 10px; /* 行间距5px，列间距10px */
  padding: 10px; /* 内边距为10px */
}

.list-five .section-title {
  grid-column: 1 / -1; /* 标题横跨整个网格（从第1列到最后一列） */
  font-weight: bold; /* 字体加粗 */
  font-size: 16px; /* 字体大小为16px */
  text-align: left; /* 文字左对齐 */
  color: #000; /* 文字颜色为黑色 */
  margin-bottom: 2px; /* 下方外边距为2px */
}

.list-five .list-item {
  display: flex; /* 使用弹性盒子布局 */
  flex-direction: column; /* 子元素按列排列 */
  align-items: center; /* 子元素水平居中 */
  justify-content: center; /* 子元素垂直居中 */
  text-align: center; /* 文本居中 */
  padding: 5px; /* 内边距为5px */
  min-width: 60px; /* 最小宽度为60px，确保项目不会过小 */
}

.list-five .list-item-icon {
  width: 30px; /* 图标宽度为30px */
  height: 30px; /* 图标高度为30px */
  margin-bottom: 8px; /* 图标与下方文字之间的间距为8px */
  object-fit: contain; /* 确保图标在指定宽高内完整显示，不被裁剪 */
}

.list-five .list-item-label {
  font-size: 12px; /* 文字字体大小为12px */
  color: #333; /* 文字颜色为深灰色（#333） */
  white-space: nowrap; /* 强制文本不换行 */
  width: 100%; /* 占据容器的全部宽度 */
  overflow: hidden; /* 溢出部分隐藏 */
  text-overflow: ellipsis; /* 溢出文本以省略号(...)显示 */
}
/* 第六排的样式 积分活动 */
.list-six {
  width: 95%; /* 设置宽度为容器宽度的92% */
  border-radius: 5px; /* 设置圆角为5px */
  background-color: rgb(255, 255, 255); /* 设置背景颜色为白色 */
  margin: 10px auto; /* 设置外边距为上下10px，左右自动 */
  display: grid; /* 使用网格布局 */
  grid-template-columns: repeat(5, minmax(60px, 1fr)); /* 创建5列，每列最小宽度为60px，最大宽度为1fr */
  grid-template-rows: auto auto auto; /* 设置三行，每行高度自动 */
  gap: 5px 10px; /* 设置网格项之间的间隔为上下5px，左右10px */
  padding: 10px; /* 设置内边距为10px */
}

/* 第六排中的标题样式 */
.list-six .section-title {
  grid-column: 1 / -1; /* 标题跨越所有列 */
  font-weight: bold; /* 字体加粗 */
  font-size: 16px; /* 字体大小为16px */
  text-align: left; /* 文本左对齐 */
  color: #000; /* 文本颜色为黑色 */
  margin-bottom: 10px; /* 底部外边距为10px */
}

/* 第六排中的列表项样式 */
.list-six .list-item {
  display: flex; /* 使用弹性盒布局 */
  flex-direction: column; /* 子元素垂直排列 */
  align-items: center; /* 子元素水平居中 */
  justify-content: center; /* 子元素垂直居中 */
  text-align: center; /* 文本居中 */
  padding: 5px; /* 内边距为5px */
  min-width: 60px; /* 最小宽度为60px */
}

/* 第六排中的图标样式 */
.list-six .list-item-icon {
  width: 30px; /* 图标宽度为30px */
  height: 30px; /* 图标高度为30px */
  margin-bottom: 8px; /* 底部外边距为8px */
  object-fit: contain; /* 图片包含在元素内，保持宽高比 */
}

/* 第六排中的标签样式 */
.list-six .list-item-label {
  font-size: 12px; /* 字体大小为12px */
  color: #333; /* 文本颜色为深灰色 */
  white-space: nowrap; /* 不换行 */
  width: 100%; /* 宽度为100% */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 溢出内容显示省略号 */
}

/* 活动卡片容器样式 */
.activity-cards {
  grid-column: 1 / -1; /* 活动卡片跨越所有列 */
  display: flex; /* 使用弹性盒布局 */
  justify-content: space-between; /* 子元素两端对齐 */
  margin-top: 5px; /* 顶部外边距为15px */
  gap: 10px; /* 子元素之间的间隔为10px */
}

/* 单个活动卡片样式 */
.activity-card {
  flex: 1; /* 弹性盒模型中的伸缩因子为1 */
  background-color: #faf5f1; /* 背景颜色为浅灰色 */
  border-radius: 8px; /* 圆角为8px */
  padding: 8px; 
  /* 内边距为12px */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* 阴影效果 */
}

/* 卡片内容布局样式 */
.card-content {
  display: flex; /* 使用弹性盒布局 */
  justify-content: space-between; /* 子元素两端对齐 */
  align-items: center; /* 子元素垂直居中 */
}

/* 卡片文字部分样式 */
.card-text {
  flex: 2; /* 弹性盒模型中的伸缩因子为2 */
}

/* 卡片标题样式 */
.card-title {
  font-weight: bold; /* 字体加粗 */
  font-size: 10px; /* 字体大小为10px */
  color: #854120; /* 文本颜色为棕色 */
}

/* 卡片副标题样式 */
.card-subtitle {
  font-size: 9px; /* 字体大小为9px */
  color: #c24506; /* 文本颜色为橙色 */
}

/* 卡片图片部分样式 */
.card-image {
  flex: 1; /* 弹性盒模型中的伸缩因子为1 */
  display: flex; /* 使用弹性盒布局 */
  justify-content: flex-end; /* 子元素右对齐 */
  align-items: center; /* 子元素垂直居中 */
}

/* 卡片图片样式 */
.card-image img {
  width: 30px; /* 图片宽度为30px */
  height: 30px; /* 图片高度为30px */
  object-fit: contain; /* 图片包含在元素内，保持宽高比 */
}

/* 第七排的样式 安全认证 */
.list-seven {
  width: 95%; /* 设置宽度为容器宽度的92% */
  border-radius: 5px; /* 设置圆角为5px */
  background-color: rgb(255, 255, 255); /* 设置背景颜色为白色 */
  margin: 10px auto; /* 设置外边距为上下10px，左右自动 */
  display: grid; /* 使用网格布局 */
  grid-template-columns: repeat(4, minmax(60px, 1fr)); /* 创建4列，每列最小宽度为60px，最大宽度为1fr */
  grid-template-rows: auto auto; /* 设置两行，每行高度自动 */
  gap: 5px 10px; /* 设置网格项之间的间隔为上下5px，左右10px */
  padding: 5px; /* 设置内边距为10px */
}

/* 第七排中的标题样式 */
.list-seven .section-title {
  grid-column: 1 / -1; /* 标题跨越所有列 */
  font-weight: bold; /* 字体加粗 */
  font-size: 16px; /* 字体大小为16px */
  text-align: left; /* 文本左对齐 */
  color: #000; /* 文本颜色为黑色 */
  margin-bottom: 2px; /* 底部外边距为10px */
}

/* 第七排中的列表项样式 */
.list-seven .list-item {
  display: flex; /* 使用弹性盒布局 */
  flex-direction: column; /* 子元素垂直排列 */
  align-items: center; /* 子元素水平居中 */
  justify-content: center; /* 子元素垂直居中 */
  text-align: center; /* 文本居中 */
  padding: 5px; 
  /* 内边距为5px */
  min-width: 60px;
   /* 最小宽度为60px */
}

/* 第七排中的图标样式 */
.list-seven .list-item-icon {
  width: 30px; /* 图标宽度为30px */
  height: 30px; /* 图标高度为30px */
  margin-bottom: 8px; /* 底部外边距为8px */
  object-fit: contain; /* 图片包含在元素内，保持宽高比 */
}

/* 第七排中的标签样式 */
.list-seven .list-item-label {
  font-size: 12px; /* 字体大小为12px */
  color: #333; /* 文本颜色为深灰色 */
  white-space: nowrap; /* 不换行 */
  width: 100%; /* 宽度为100% */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 溢出内容显示省略号 */
}
/* 第八排的样式 - 优惠福利区域 */
.list-eight {
  width: 95%;  /* 设置容器宽度为父元素的92% */
  border-radius: 5px;  /* 设置圆角为5px */
  background-color: rgb(255, 255, 255);  /* 设置背景色为白色 */
  margin: 10px auto;  /* 上下外边距10px，左右自动居中 */
  display: grid;  /* 使用网格布局 */
  grid-template-columns: repeat(4, minmax(60px, 1fr));  /* 创建4列，每列最小60px */
  grid-template-rows: auto auto auto;  /* 创建3行，高度自动 */
  gap: 5px 10px;  /* 行间距5px，列间距10px */
  padding: 5px;  /* 内边距5px */
}

/* 第八排的标题样式 */
.list-eight .section-title {
  grid-column: 1 / -1;  /* 标题跨越所有列 */
  font-weight: bold;  /* 字体加粗 */
  font-size: 16px;  /* 字体大小16px */
  text-align: left;  /* 文字左对齐 */
  color: #000;  /* 文字颜色为黑色 */
  margin-bottom: 2px;  /* 下方外边距2px */
}

/* 第八排的列表项样式 */
.list-eight .list-item {
  display: flex;  /* 使用弹性盒布局 */
  flex-direction: column;  /* 垂直方向排列 */
  align-items: center;  /* 水平居中对齐 */
  justify-content: center;  /* 垂直居中对齐 */
  text-align: center;  /* 文本居中 */
  padding: 5px;  /* 内边距5px */
  min-width: 60px;  /* 最小宽度60px */
}

/* 第八排的图标样式 */
.list-eight .list-item-icon {
  width: 30px;  /* 图标宽度30px */
  height: 30px;  /* 图标高度30px */
  margin-bottom: 8px;  /* 下方外边距8px */
  object-fit: contain;  /* 保持图片比例完整显示 */
}

/* 第八排的标签文字样式 */
.list-eight .list-item-label {
  font-size: 12px;  /* 字体大小12px */
  color: #333;  /* 文字颜色深灰 */
  white-space: nowrap;  /* 不换行 */
  width: 100%;  /* 宽度100% */
  overflow: hidden;  /* 超出隐藏 */
  text-overflow: ellipsis;  /* 超出显示省略号 */
}
/* 第九排的样式 - 其他服务区域 */
.list-nine {
  width: 95%;  /* 设置容器宽度为父元素的92% */
  border-radius: 5px;  /* 设置圆角为5px */
  background-color: rgb(255, 255, 255);  /* 设置背景色为白色 */
  margin: 10px auto;  /* 上下外边距10px，左右自动居中 */
  display: grid;  /* 使用网格布局 */
  grid-template-columns: repeat(4, minmax(60px, 1fr));  /* 创建4列，每列最小60px */
  grid-template-rows: auto auto auto;  /* 创建3行，高度自动 */
  gap: 5px 10px;  /* 行间距5px，列间距10px */
  padding: 5px;  /* 内边距5px */
}

/* 第九排的标题样式 */
.list-nine .section-title {
  grid-column: 1 / -1;  /* 标题跨越所有列 */
  font-weight: bold;  /* 字体加粗 */
  font-size: 16px;  /* 字体大小16px */
  text-align: left;  /* 文字左对齐 */
  color: #000;  /* 文字颜色为黑色 */
  margin-bottom: 2px;  /* 下方外边距2px */
}

/* 第九排的列表项样式 */
.list-nine .list-item {
  display: flex;  /* 使用弹性盒布局 */
  flex-direction: column;  /* 垂直方向排列 */
  align-items: center;  /* 水平居中对齐 */
  justify-content: center;  /* 垂直居中对齐 */
  text-align: center;  /* 文本居中 */
  padding: 5px;  /* 内边距5px */
  min-width: 60px;  /* 最小宽度60px */
}

/* 第九排的图标样式 */
.list-nine .list-item-icon {
  width: 30px;  /* 图标宽度30px */
  height: 30px;  /* 图标高度30px */
  margin-bottom: 8px;  /* 下方外边距8px */
  object-fit: contain;  /* 保持图片比例完整显示 */
}

/* 第九排的标签文字样式 */
.list-nine .list-item-label {
  font-size: 12px;  /* 字体大小12px */
  color: #333;  /* 文字颜色深灰 */
  white-space: nowrap;  /* 不换行 */
  width: 100%;  /* 宽度100% */
  overflow: hidden;  /* 超出隐藏 */
  text-overflow: ellipsis;  /* 超出显示省略号 */
}
/* 第十排 - 兑换专区标题栏 */
.exchange-header {
  width: 92%;  /* 设置容器宽度为父元素的92% */
  margin: 10px auto;  /* 上下外边距10px，左右自动居中 */
  display: flex;  /* 使用弹性盒布局 */
  justify-content: space-between;  /* 两端对齐，标题在左，"更多"在右 */
  align-items: center;  /* 垂直居中对齐 */
  padding: 0 5px;  /* 左右内边距5px */
}

/* 兑换专区主标题样式 */
.exchange-title {
  font-size: 18px;  /* 字体大小18px，比其他标题大一号 */
  font-weight: bold;  /* 字体加粗 */
  color: #000;  /* 文字颜色为黑色 */
}

/* "更多>"文字样式 */
.exchange-more {
  font-size: 10px;  /* 字体大小10px，比标题小 */
  color: #999;  /* 文字颜色为浅灰色 */
}
/* 底层 */
.exchange-items {
  width: 95%;
  margin: 10px auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 5px;
}

.exchange-item {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.item-image {
  width: 100%;
  height: 0;
  padding-bottom: 100%; /* 保持正方形比例 */
  position: relative;
  
}

.item-image img {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 50%;
  height: 50%;
  object-fit: cover;
}

.item-title {
  padding: 8px;
  font-weight: bold;
  font-size: 14px;
  color: #333;
  /* 文本超出显示省略号 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-bottom {
  padding: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-points {
  display: flex;
  align-items: baseline;
  color: #ff4d4f;
}

.points-number {
  font-size: 16px;
  font-weight: bold;
  margin-right: 2px;
}

.points-text {
  font-size: 12px;
}

.exchange-button {
  background-color: #ff4d4f;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

</style>